<template>
    <el-container>
        <el-main>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="名称">
                    <template slot-scope="scope">
                        <span>{{ scope.row.filename }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="fileId">
                    <template slot-scope="scope">
                        <i class="el-icon-info"></i>
                        <span style="margin-left: 4px">{{ scope.row.fileId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="日期">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 4px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>名称: {{ scope.row.filename }}</p>
                            <p>fileId: {{ scope.row.fileId }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium" :type="scope.row.status === 'success' ? 'success' : 'danger'">{{
                                    scope.row.status === 'success' ? '转化成功' : '转化失败'
                                }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" class="delete" type="danger" @click="handleDelete(scope.row.fileId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-upload
                class="upload-model"
                action="http://localhost:8080/user/upload"
                :on-success="handleSuccess"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :file-list="fileList"
                :show-file-list="false"
            >
                <el-button type="primary">点击上传</el-button>
            </el-upload>
        </el-main>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            fileList: [
                {
                    name: 'food.jpeg',
                    url:
                        'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                },
                {
                    name: 'food2.jpeg',
                    url:
                        'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }
            ],
            tableData: [
                {
                    filename: '-1F装修.rvt',
                    fileId: 2004793133385920,
                    createTime: '2020-11-27 20:19:21',
                    status: 'success'
                },
                {
                    filename: '1F装修.rvt',
                    fileId: 2004791355001024,
                    createTime: '2020-11-27 20:26:03',
                    status: 'success'
                },
                {
                    filename: 'rac_basic_sample_project.rvt',
                    fileId: 2003960239220736,
                    createTime: '2020-11-26 16:04:04',
                    status: 'false'
                },
                {
                    filename: 'BIMFACE示例图纸.dwg',
                    fileId: 2003462145427456,
                    createTime: '2020-11-25 23:09:52',
                    status: 'success'
                }
            ]
        };
    },
    mounted() {
        this.handleInit();

        // let response = {fileId: 2012584716175552, filename: "BIMFACE示例模型.rvt", createTime: "2020-12-08 20:29:47"}
        //     this.tableData.push(response)
    },
    methods: {
        handleSuccess(response, file, fileList) {
            console.log(response, file, fileList);
            this.tableData.push(response);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(fileId) {
            let me = this;
            console.log(fileId);
            this.$axios({
                method: 'get',
                url: 'http://localhost:8080/user/delete?fileId=' + fileId
            })
                .then(res => {
                    console.log(res);
                    me.handleInit();
                })
                .catch(err => {
                    this.$message({
                        message: '删除失败',
                        type: 'error',
                        showClose: true,
                        center: true
                    });
                });
        },
        handleInit() {
            this.$axios({
                method: 'get',
                url: 'http://localhost:8080/user/getStatus'
            })
                .then(res => {
                    console.log(res.data);
                    this.tableData = res.data;
                })
                .catch(err => {
                    console.log(err);
                });
            
        }
    }
};
</script>

<style scoped>
.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    height: 83vh;
    padding: 0;
}
</style>

<style>
.upload-model .el-upload.el-upload--text {
    width: auto;
    background-color: transparent;
    border: none;
    float: left;
    margin-top: 10px;
}
.upload-model .el-upload.el-upload--text button {
    border-radius: 5px;
}
.content {
    padding-right: 0 !important;
}
.delete.el-button {
    margin-left: 10px;
}
</style>
